<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">到货管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>货物验收管理</el-breadcrumb-item>
        <el-breadcrumb-item>差错信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--form表单搜索框-->
    <!-- 搜索筛选 -->
    <div>
      <el-form :inline="true"  class="driverReceipt-search" style="text-align: left">

        <el-form-item>
          <el-input size="small"  placeholder="货运单编号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <!--功能按钮-->
      <el-row :inline="true" style="text-align: left" >
        <el-button type="success" @click="addDriverReceiptFormVisible = true">增加</el-button>

      </el-row>
    </div>

    <!--增加差错记录弹出框-->
    <div>
      <el-dialog title="增加差错记录" :visible.sync="addDriverReceiptFormVisible">
        <el-form :model="adddriverreceiptform" ref="adddriverreceiptform" :inline="true" label-width="80px" :rules="rules">
          <el-form-item label="货运单编号" label-width="150px" prop="fid" >
            <el-input v-model="adddriverreceiptform.fid" autocomplete="off"  @blur="panduanError()"></el-input>
          </el-form-item>
          <el-form-item label="差错类型" label-width="150px" prop="errorname">
            <el-input v-model="adddriverreceiptform.errorname"  autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="差错详情" label-width="150px" prop="errorreason">

            <el-input v-model="adddriverreceiptform.errorreason"  autocomplete="off" >

            </el-input>
          </el-form-item>


          <el-form-item label="差错图片" label-width="150px">
<!--            action="http://localhost:8080/error/upLoadImg"
<el-input v-model="adddriverreceiptform.errorimg" autocomplete="off" type="file"></el-input>-->

            <el-upload
                class="upload-demo"
                ref="upload"
                action="http://localhost:8080/error/upLoadImg"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>



          </el-form-item >
          <el-form-item label-width="200px" >
            <el-button @click="addDriverReceiptFormVisible = false;resetForm('adddriverreceiptform')">取 消</el-button>
            <el-button type="primary" @click="addDriverReceipt('adddriverreceiptform')">确 定</el-button>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" >

        </div>
      </el-dialog>
    </div>



    <!--差错记录列表-->
    <el-table :data="pageInfo.list" style="width: 100%">
<!--      <el-table-column type="selection" width="55"></el-table-column>-->
      <el-table-column fixed prop="fid" label="货运单号" width="180"></el-table-column>
      <el-table-column prop="id" label="验收单号" width="180"></el-table-column>
      <el-table-column prop="errorname" label="差错类型" width="180"></el-table-column>
      <el-table-column prop="errorreason" label="差错详情" width="120"></el-table-column>
      <el-table-column prop="errorimg" label="差错图片" width="180"></el-table-column>

      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--修改差错记录弹出框-->
    <div>
      <el-dialog title="增加差错记录" :visible.sync="updateDriverReceiptFormVisible">
        <el-form :model="updatedriverreceiptform" :inline="true" label-width="80px">
          <el-form-item label="货运单编号" label-width="150px">
            <el-input v-model="updatedriverreceiptform.fid" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="差错类型" label-width="150px">
            <el-input v-model="updatedriverreceiptform.errorname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="差错详情" label-width="150px">

            <el-input type="textarea" v-model="updatedriverreceiptform.errorreason"  >

            </el-input>
          </el-form-item>
          <el-form-item label="差错图片" label-width="150px">
            <el-input v-model="updatedriverreceiptform.errorimg" autocomplete="off" type="file"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer" >
          <el-button @click="updateDriverReceiptFormVisible = false;updateDriverReceiptForm={}">取 消</el-button>
          <el-button type="primary" @click="updateDriverReceipt()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--      分页-->
    <div class="block">
      <el-pagination style="margin-left: 280px"
          @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum" :page-sizes="[5, 10]" :page-size="pageInfo.pageSize"
           layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: "ErrorRecordView",
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    /*表格的修改和删除方法*/
    handleEdit(index, row) {
      console.log(index, row);
      this.updateDriverReceiptFormVisible=true;
      this.updatedriverreceiptform={...row}
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('确定要删除该条差错记录?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        //发送axios
        this.axios.delete("http://localhost:8080/error/" + row.eiid).then(res =>{
          if(res.data.code == 200){
            this.getList();
            this.$message({
              type: 'success',
              message: res.data.msg
            });
          }else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*分页的两个方法*/
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    },
    getList() {
      this.axios.get("http://localhost:8080/error/" + this.currentPage + "/" + this.pageSize).then(res => {
        console.log(res.data.data.list);
        this.pageInfo = res.data.data;

      })
    },
    addDriverReceipt(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("http://localhost:8080/error",this.adddriverreceiptform).then(res => {
            this.$message(res.data.msg);
            this.adddriverreceiptform={};
            this.addDriverReceiptFormVisible = false
            this.getList();
          })
        } else {
          this.$message('必填选项还没填呢!!');
          return false;
        }
      });

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    panduanError(){
      this.axios.get("http://localhost:8080/error/panduanError/" + this.adddriverreceiptform.fid).then(res => {
        this.$message(res.data.msg);
        if (res.data.code == 500){
          this.adddriverreceiptform.fid='';
        }
      })
    },
    updateDriverReceipt(){
      this.axios.put("http://localhost:8080/error",this.updatedriverreceiptform).then(res=>{
        this.$message(res.data.msg);
        this.updatedriverreceiptform={};
        this.updateDriverReceiptFormVisible = false
        this.getList();
      })
    },
    //上传图片的方法


    },
  data() {
    return {
      activeName: 'first',
      //增加图片两个参数

      fileList: []
      ,
      //新增弹出框参数
      addDriverReceiptFormVisible:false,
      adddriverreceiptform: {
        fid: '',
        //差错信息表主键
        eiid:'',
        //验收单id
        id:'',
        errorname:'',
        errorreason:'',
        errorimg:''
      },
      rules: {
        fid: [
          { required: true, message: '请填写货运单号', trigger: 'blur'}
            ],
        errorname: [
          { required: true, message: '请填写差错类型', trigger: 'blur'}

        ],
        errorreason: [
          { required: true, message: '请填写差错详情', trigger: 'blur' },

        ],
      },


      //新增弹出框参数
      updateDriverReceiptFormVisible:false,
      updatedriverreceiptform: {
        fid: '',
        eiid:'',
        //验收单id
        id:'',
        errorname:'',
        errorreason:'',
        errorimg:''
      },
      formLabelWidth: '70px',
      //差错信息表数据数据
      //当前页码
      currentPage:1,
      //每页显示的条数
      pageSize:2,
      //分页插件返回的json对象
      pageInfo:{},

      //搜索表单信息
      search: '',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      //上传图片数据
     /* ruleForm:{
        logoUrl:'',//logo
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl:  "/v1/enterprise/upload", // 上传图片的后台controller的地址
      dialogFormLabelWidth: '120px',*/


    };
  },
    created() {
      //发送axios
      this.getList();
    },


}
</script>


<style scoped>

</style>